<template>
  <div class="Lyrics_box">
    <div class="moveCss">
      <img
        :class="moveClass ? 'switch_active' : 'switch'"
        src="@/assets/imag/switch.png"
        alt=""
      />
      <img :class="moveClass?'cd_active':'cd'" src="@/assets/imag/cd.png" alt="" />
      <img
        :class="moveClass?'move_pic_active':'move_pic'"
        :src="
          songMessageDetail.songs ? songMessageDetail.songs[0].al.picUrl : ''
        "
        alt=""
      />
    </div>

    <div class="Lyrics_right">
      <p v-for="(lyrics,index) in LRC" :key="index">{{lyrics.lrc}}</p>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      moveClass: 0,
    };
  },
  computed: {
    ...mapState(["songMessageDetail",'LRC']),
  },
  methods:{
    handleLrcTime(){
      // console.log(this.LRC)
      const {LRC} = this
      let minutes = []
      let second = []
      let handleTime=[]
      LRC.forEach(element => {
        minutes.push(element.lrcTime.slice(0,2)*1000*60)
        second.push(element.lrcTime.slice(3,5)*1000)
      });
      for (let i=0;i<minutes.length;i++){
        handleTime.push(minutes[i]+second[i])
      }
      // 这个是处理好了的数据
      console.log(handleTime)
    }
  },
  mounted(){
    // 改变样式
    this.moveClass = 1
    this.$bus.$on('changeMoveClass',(value)=>{this.moveClass=value}) //传给footer组件的playMusic方法

    this.handleLrcTime()
  },
};
</script>

<style lang="less" scoped>
.Lyrics_box{
  position: relative;
  width: 100%;
  height: 100%;
  .Lyrics_right{
    position: absolute;
    right: 0%;
    top: 0%;
    width: 55%;
    height: 60%;
    overflow: auto;
  }
}


.moveCss {
  position: relative;
  left: 150px;
  width: 30%;
  height: 60%;
  .switch {
    width: 100px;
    top: -45px;
    left: 130px;
    position: absolute;
    transform: rotate(0deg);
    transform-origin: 0 0;
    transition: all 1s linear;
    z-index: 1;
  }
  .switch_active {
    width: 100px;
    top: -45px;
    left: 130px;
    position: absolute;
    transform-origin: 0 0;
    transform: rotate(15deg);
    transition: all 1s linear;
    z-index: 2;
  }

  .cd {
    position: absolute;
    top: 60px;
    width: 200px;
    height: 200px;
    z-index: 1;
    // animation: 10s rotate_ar linear infinite;
  }
  .cd_active{
    position: absolute;
    top: 60px;
    width: 200px;
    height: 200px;
    z-index: 1;
    animation: 10s rotate_ar linear infinite;
  }

  .move_pic {
    position: absolute;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    top: 80px;
    left: 20px;
    // animation: 10s rotate_ar linear infinite;
  }
  .move_pic_active{
    position: absolute;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    top: 80px;
    left: 20px;
    animation: 10s rotate_ar linear infinite;
  }

  @keyframes rotate_ar {
    0% {
      transform: rotateZ(0deg);
    }
    100% {
      transform: rotateZ(360deg);
    }
  }
}
</style>